<template>
  <div class="mt-12px w-960px p-18px box-border flex flex-col rounded-8px bg-white">
    <div class="flex flex-row">
      <div class="ant-image" style="width: 60px; height: 60px">
        <img
          class="ant-image-img w-60px h-60px rounded-50% hover:scale-105 transition"
          src="https://data.lita.cool/static/avatar/avatar_7.jpeg"
          style="height: 60px"
        />
      </div>
      <div class="ml-10px flex flex-col">
        <div class="mt-10px text-14px font-bold text-black">{{ account.nick_name }}</div>
        <div class="mt-10px text-14px text-black">Lita ID: {{ account.user_id }}</div>
      </div>
    </div>
    <!-- <div class="mt-22px flex flex-row items-center">
      <div class="text-14px text-[#0092FF] underline cursor-pointer hover:no-underline">
        为不同账号充值
      </div>
    </div> -->
  </div>
  <div class="relative w-960px h-[fit-content]">
    <div
      class="w-full h-[fit-content] px-10px py-24px box-border flex flex-row flex-wrap rounded-8px border border-#009FFF bg-white mt-20px rounded-tl-0!"
    >
      <div
        v-for="item in goldCoinList"
        :key="item.id"
        @click="handleClick(item)"
        class="relative mx-10px mb-20px w-140px h-101px bg-#FBFDFD rounded-8px border border-#E1E1E1 flex flex-col items-center cursor-pointer hover:shadow"
      >
        <div class="mt-16px h-24px flex flex-row items-center">
          <img src="@/assets/money.png" alt="coin" class="w-24px h-24px" />
          <div class="ml-6px text-18px text-#FF9E10">
            {{ `${item.number}+${item.extra_number}` }}
          </div>
        </div>
        <div class="mt-9px w-120px h-1px border-b border-b-dashed border-#E5E5E5"></div>
        <div class="mt-9px h-14px leading-14px text-14px text-black">{{ item.price }}元</div>
        <!-- <div class="mt-6px h-12px leading-12px text-12px text-#999999 line-through">NT$ 122</div> -->
        <!-- <div
              class="absolute top-0 right-0 w-57px h-16px bg-#FF4343 rounded-bl-8px rounded-tr-8px text-12px text-white leading-16px text-center"
            >
              18% OFF
            </div> -->
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive } from 'vue'
import { getAllGoldCoin, addGoldCoin } from '@/api/wallet'
import { useUserStore } from '@/store'
import { Message } from '@arco-design/web-vue'
const { userInfo, setGoldCoin } = useUserStore()
const handleClick = (item) => {
  // console.log('充值id为', id)
  addGoldCoin(item.id).then(() => {
    Message.success('充值成功')
    setGoldCoin(item.number + item.extra_number)
  })
}
const goldCoinList = ref([])
const account = reactive({
  nick_name: userInfo.nick_name,
  user_id: userInfo.user_id
})
onMounted(() => {
  getAllGoldCoin().then((res) => {
    goldCoinList.value = res
  })
})
</script>
<style lang="less" scoped></style>
